<template>
  <div style="overflow: hidden;">
    <el-row style="margin-top: 50%; padding-bottom: 25px;">
      <el-col class="flex justify-center font-bold text-4xl text-green-500">
        欢迎登录
      </el-col>
    </el-row>
    <el-row>
      <el-col class="flex justify-center">
        <el-form :rules="rules" ref="formRef" :model="form" style="width: 75%;">
          <el-form-item prop="userType">
            <el-input v-model="form.userType" disabled>
            </el-input>
          </el-form-item>
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名">
              <template #prefix>
                <el-icon><user/></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" show-password v-model="form.password" placeholder="请输入密码">
              <template #prefix>
                <el-icon><lock/></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-row :gutter="145" style="padding-bottom: 10px;">
            <el-col :span="12">
              <el-checkbox v-model="form.rememberMe" label="记住我"/>
            </el-col>
            <el-col :span="12">
              <el-link @click="router.push('/forget')">忘记密码？</el-link>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button round class="w-[295px]"  type="success" @click="submit" plain>登录</el-button>
          </el-form-item>
          <el-divider>
            <span style="font-size: 13px;">没有账号？</span>
          </el-divider>
          <el-form-item>
            <el-button round class="w-[295px]"  type="warning" @click="router.push('/register')" plain>注册账号</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElNotification} from "element-plus";
import {useRouter} from "vue-router";
import {useCountStore, useUserStore} from "@/stores/myStore";
import {post, get, postForm} from "@/utils/axiosMethod.js";

const userStore = useUserStore()
const router = useRouter()
const form = reactive({
  userType: '企业',
  username: 'jdz',
  password: '1',
  rememberMe: false
})
const formRef = ref(null)
const rules = reactive({
  username: [
    {required: true, message: '用户名不能为空', trigger: 'change'},
    {min: 1, max: 6, message: '长度小于7', trigger: 'blur'},
  ],
  password: [{
    required: true,
    message: '密码不能为空',
    trigger: 'change',
  },
  ],
})
const submit = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      try {
        postForm("/api/auth/login", {
          username: form.username,
          password: form.password,
          groupName: form.userType,
          rememberMe: form.rememberMe
        }, (message)=> {
          get('/api/user/me', (userInfo)=> {
            console.log(userInfo)
            userStore.auth.user = userInfo
            router.push('/index')
          }, ()=> {
            userStore.auth.user = null
          })

          ElMessage({
            message,
            type: 'success',
            duration: 1000
          })
          router.push('/index')
        })
      } catch (err) {
        console.log("errorOne" + err)
        ElNotification({
          message: "请求失败~",
          type: 'error',
          duration: 1500
        })
      }
    } else {
      ElNotification({
        message: "请输入完整!",
        type: 'error',
        duration: 1500
      })
    }
  })
}
</script>

<style scoped>

</style>